<template>
    <div class="getdate">
        <div>
            <div class="zongchang">
            <div v-for="(v,i) in dates" :key="i" :class="{active:now==i}" @click="now=i,riqi(v)">
            <span style="font-size:5vw">{{v}}</span>
            <span>{{weeks[i] | week(i)}}</span>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
    export default{
        data() {
            return {
                now:0,
                dates:[],
                weeks:[],
            }
        },
        methods: {
           registration:function(){
                for(let i=0; i<14; i++){
                    // 请求做把请求到的做对比,然后push一个对象,dates{date,是否上班}
                    let date = this.$moment(new Date()).subtract(-i, "days").format("MM.DD") 
                    this.dates.push(date)
                    let week = this.$moment().subtract(-i, "days").format('E')
                    this.weeks.push(week)
                }
            },
            riqi(value){
                this.Mdata(value)
            },
            ...mapMutations(['Mdata'])
        },
        mounted(){
            this.registration()
        },
        filters: {
    week(value,i) {
        if(i==0)return '今天'
       switch(value*1){
                case 1:
                    return '周一'
                break
                case 2:
                    return '周二'
                break
                case 3:
                    return '周三'
                break
                case 4:
                    return '周四'
                break
                case 5:
                    return '周五'
                break
                case 6:
                    return '周六'
                break
                case 7:
                    return '周日'
                break
                };
            }
        },
    }
</script>


<style lang="scss" scoped>
.getdate {
    &::after {
        content: '>';
        color: #acacb7;
        text-align: center;
        display: block;
        position: fixed;
        right: 0;
        top: 67px;
        width: 6vw;
        height: 21vw;
        line-height: 21vw;
        margin-right: 2vw;
        background-color: #e4e5e9;
        border-radius: 3vw;
    } 
    >div{
        width: 86vw;
        overflow: auto;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-y: auto;
    }
    .zongchang {
        width: 245vw;
        display: flex;
        justify-content: space-between;
    div {
        margin-right: 2vw;
        display: inline-block;
        width: 14vw;
        height: 20vw;
        border: 1px solid #aaa;
        border-radius: 3vw;
        &.active {
            background-color: rgb(9, 218, 176);
            color: #fff;
        }
        span {
            display: block;
            text-align: center;
            font-size: 4vw;
            padding-top: 3vw;
        }
    }
    }
}
.getdate>div::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>